<template>
  <input
    type="file"
    style="display: none"
    ref="fileInput"
    multiple
    @change="onFileSelected"
  />
  <ElButton v-bind="$attrs" @click="selectFiles"><slot></slot></ElButton>
</template>

<script setup lang="ts">
export interface Props {
  onChange?: (files: FileList) => void;
  className?: StyleSheet;
}
const props = defineProps<Props>();
const fileInput = ref();
const selectFiles = () => {
  fileInput.value?.click();
};
const onFileSelected = (e: any) => {
  props.onChange && props.onChange(e.target?.files);
};
</script>
